<template>
  <div>
    <div class="top-info">
      <div v-for="(item, index) in infoList" :key="index">
        <img :src="require('@/assets/pagesImg/' + item.imgSrc)" alt="" />
        <div>
          <p>{{ item.title }}</p>
          <div style="font-size: 30px">{{ item.number }} <span>人</span></div>
        </div>
      </div>
    </div>
    <div class="eachats"><eacharts :option="option" /></div>
    <div class="schoolInfo"><tabble :school="school" /></div>
  </div>
</template>
<script>
import eacharts from "@/components/eacharts/index.vue";
import tabble from "@/components/table/index.vue";
export default {
  name: "BasicInformation",
  components: { eacharts, tabble },
  data() {
    return {
      infoList: [
        {
          title: "志愿者数量",
          number: "3938",
          imgSrc: "first.png",
          // imgSrc: "/static/img/pagesImg/组 6769.png",
        },
        {
          title: "当日志愿者申请数量",
          number: "2",
          imgSrc: "组 6767.png",
        },
        {
          title: "当日应到执勤人员",
          number: "62",
          imgSrc: "组 6777.png",
        },
        {
          title: "当日实到执勤人员",
          number: "32",
          imgSrc: "组 6778.png",
        },
      ],
      option: {
        legend: {
          right: "10%",
          x: "right",
          y: "top",
          itemWidth: 6,
          itemGap: 20,
          orient: "horizontal",
          data: ["应到", "实到", "单位"],
        },
        title: {
          text: "近七天执勤情况",
          textStyle: {
            color: "#126BFF",
          },
          // left: "50%",
          // textAlign: "center",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            lineStyle: {
              color: "#ddd",
            },
          },
          grid: {
            left: "3%",
            right: "10%",
            bottom: "3%",
            containLabel: true,
          },
          backgroundColor: "rgba(255,255,255,1)",
          padding: [5, 10],
          textStyle: {
            color: "#7588E4",
          },
          extraCssText: "box-shadow: 0 0 5px rgba(0,0,0,0.3)",
        },

        xAxis: {
          type: "category",
          data: [
            "2月1日",
            "2月2日",
            "2月3日",
            "2月4日",
            "2月5日",
            "2月6日",
            "2月7日",
          ],
          boundaryGap: false,
          splitLine: {
            show: false,
            interval: "auto",
            lineStyle: {
              color: ["#D4DFF5"],
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#609ee9",
            },
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 14,
              color: "#333333",
            },
          },
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: false,
            lineStyle: {
              color: ["#D4DFF5"],
            },
          },
          boundaryGap: true,
          axisTick: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#609ee9",
            },
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 14,
              color: "#333333",
            },
          },
        },
        series: [
          {
            name: "应到",
            type: "line",
            smooth: true,
            // showSymbol: false,
            // symbol: "circle",
            symbolSize: 10, //尺寸
            data: ["50", "150", "350", "200", "440", "50", "800"],
            areaStyle: {
              normal: {
                color: this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(249, 51, 51, 0.20)",
                    },
                    {
                      offset: 1,
                      color: "rgba(249, 51, 51, 0)",
                    },
                  ],
                  false
                ),
              },
            },
            itemStyle: {
              normal: {
                color: "#F93333",
                symbol: "circle",
                symbolSize: 6,
              },
            },
            lineStyle: {
              normal: {
                width: 3,
              },
            },
          },
          {
            name: "实到",
            type: "line",
            smooth: true,
            // showSymbol: false,
            // symbol: "circle",
            symbolSize: 10,
            data: ["30", "100", "300", "400", "450", "780", "1000"],
            areaStyle: {
              normal: {
                color: this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(18, 107, 255, 0.20)",
                    },
                    {
                      offset: 1,
                      color: "rgba(18, 107, 255, 0)",
                    },
                  ],
                  false
                ),
              },
            },
            itemStyle: {
              normal: {
                color: "#126BFF",
                symbol: "circle",
                symbolSize: 6,
              },
            },
            lineStyle: {
              normal: {
                width: 3,
              },
            },
          },
        ],
      },
      school: {},
    };
  },
  methods: {},
  created() {},
  mounted() {},
};
</script>
<style lang="scss" scoped>
.top-info {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.top-info > div {
  display: flex;
  width: 270px;
  height: 100px;
  // border: 1px red solid;
  border-radius: 10px;
  background-color: white;
  align-items: center;
  padding: 10px;
  box-sizing: border-box;
}
.top-info > div img {
  width: 77px;
  height: 75px;
}
.top-info > div > div {
  // border: 1px red solid;
  display: flex;
  flex: 1;
  text-align: left;
  vertical-align: middle;
  height: 100px;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
}
.eachats {
  // border: 1px red solid;
  border-radius: 15px;
  background-color: white;
  box-sizing: border-box;
  margin: 20px 0 20px 0;
  padding: 20px;
  height: 350px;
}
.schoolInfo {
  // border: 1px red solid;
  box-sizing: border-box;
  background-color: white;
  padding: 15px;
  border-radius: 15px;
}
</style>
